<template>
  <div class="coupon-wrapper mb15">
    <div class="coupon ">
      <div class="coupon-intro">
        <h4 class="coupon-name">{{name}}</h4>
        <ul>
          <li v-if="condition">{{condition}}</li>
          <li v-if="startAt">限 {{startAt}}-{{endAt}}</li>
          <li v-if="code">券码：{{code}}</li>
        </ul>
      </div>
      <div v-if="value > 0" class="coupon-value">
        {{currency}} {{value}}
      </div>
      <div v-else class="coupon-value">
        <span style="font-size:18px;">兑换券</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Coupon',
    props: {
      code: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: 'cash'
      },
      // 优惠券名称
      name: {
        type: String,
        default: ''
      },
      // 折扣券优惠金额
      value: {
        type: Number,
        default: undefined
      },
      startAt: {
        type: String,
        default: ''
      },
      endAt: {
        type: String,
        default: ''
      },
      // 货币符号
      currency: {
        type: String,
        default: '¥'
      },
      // 使用条件
      condition: {
        type: String,
        default: ''
      },
      // 描述信息
      description: {
        type: String,
        default: ''
      }
    },
    data() {
      return {

      }
    },
  }
</script>

<style scoped>
  .coupon-wrapper .coupon {
    margin-bottom: 20px;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
  }
  .coupon-wrapper .coupon > div {
    padding: 10px;
    border-radius: 12px;
  }
  .coupon-wrapper .coupon .coupon-name {
    font-size: 20px;
  }
  .coupon-wrapper .coupon .coupon-intro {
    position: relative;
    background: #fff;
    flex: 3;
  }
  .coupon-wrapper .coupon .coupon-intro ul {
    color: #aaa;
    list-style: none;
  }
  .coupon-wrapper .coupon .coupon-intro:after {
    content: ' ';
    border: 2px dashed #eee;
    height: 100%;
    position: absolute;
    top: 0;
    right: -2px;
    z-index: 2;
  }
  .coupon-wrapper .coupon .coupon-value {
    display: flex;
    flex: 1;
    position: relative;
    background: #9dc57a;
    color: #fff;
    font-size: 26px;
    align-items: center;
    justify-content: center;
  }
  .coupon-wrapper .coupon .coupon-value:before {
    content: ' ';
    width: 24px;
    height: 24px;
    position: absolute;
    top: -12px;
    left: -12px;
    border-radius: 100%;
    background: #eee;
  }
  .coupon-wrapper .coupon .coupon-value:after {
    content: ' ';
    width: 24px;
    height: 24px;
    position: absolute;
    bottom: -12px;
    left: -12px;
    border-radius: 100%;
    background: #eee;
  }
</style>
